<template>
  <div class="eidttpos">
    <el-form label-width="80px">
      <el-form-item label="主标题">
        <el-input v-model="title"></el-input>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="sub_title"></el-input>
      </el-form-item>
      <el-form-item label="品牌图片">
        <el-upload
          class="avatar-uploader"
          action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
          :headers="headers"
          name="good_pic"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="最低价">
        <el-input v-model="price"></el-input>
      </el-form-item>
      <el-form-item label="显示">
        <el-switch
          v-model="value"
          active-value="1"
          inactive-value="0"
          active-color="#409eff"
          inactive-color="#dcdfe6"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="sort"></el-input>
      </el-form-item>
      <el-form-item label="品牌描述">
        <GoodDetails  @fn="changeContentFn" />
        <!-- @fn="changeContentFn" -->
   
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveFn">保存</el-button>
        <el-button @click="closeFn">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import GoodDetails from "../good/GoodDetails.vue";
const { getTopicInfo, addTopic } = require("../../request/httpApi");
export default {
  components: {
    GoodDetails,
  },
  data() {
    return {
      title: "", //主标题
      sub_title: "", //副标题
      imageUrl: "", //图片
      price: "", //最低价
      value: "", //显示
      sort: "", //排序
      content: "", //富文本
      headers: {
        "X-Nideshop-Token": localStorage.getItem("token"),
      },
    };
  },
  created() {
    // console.log(this.$route.params.tid);
    //专题详情的数据请求
    getTopicInfo({
      id: this.$route.params.tid,
    }).then((res) => {
      if (res.errno === 0) {
        let {
          scene_pic_url,
          is_show,
          price_info,
          subtitle,
          title,
          sort_order,
          content
        } = res.data;
        this.title = title;
        this.sub_title = subtitle;
        this.imageUrl = scene_pic_url;
        this.price = price_info;
        this.value = is_show.toString();
        this.sort = sort_order;
        this.content = content
      }
    });
  },
  methods: {
    //上传成功的图片
    handleAvatarSuccess(response) {
      // console.log(response.data.fileUrl);
      this.imageUrl = response.data.fileUrl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 50K!");
      }
      return isJPG && isLt2M;
    },
    //点击保存 请求数据
    saveFn() {
      //非空校验
      if(this.title.trim()===''){
        this.$message.error("主标题必填")
        return
      }
      addTopic({
        id: this.$route.params.tid,
        title: this.title,
        content: this.content,
        subtitle: this.sub_title,
        price_info: this.price,
        sort_order: this.sort,
        is_show: this.value === "1" ? true : false,
        scene_pic_url: this.imageUrl,
      }).then((res) => {
        if (res.errno === 0) {
          if (this.$route.params.tid) {
            this.$message.success("修改成功");
            this.$router.push("/topic");
          } else {
            this.$message.success("添加成功");
            this.$router.push("/topic");
          }
        }
      });
    },
    //取消按钮
    closeFn(){
      this.$router.push("/topic")
    },
      changeContentFn(val){
      // console.log(val);
      this.content = val
      }
  },

};
</script>

<style lang="less" >
.eidttpos {
  padding: 10px;
  background-color: #fff;
  .el-input__inner {
    width: 225px;
    height: 40px;
  }

  .quill-editor[data-v-c5ea9226] {
    width: 100%;
    height: 500px;
  }

  .el-form-item__content {
    .edit_container {
      border: 1px solid #ccc;
      .ql-toolbar {
        border: 1px solid #ccc;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
      }
    }
  }

  .ql-container.ql-snow {
    border: 0;
  }

  .avatar-uploader {
    border: 1px solid #dcdfe6;
    width: 187px;
    height: 105px;
    .el-upload {
      display: block;
      line-height: 105px;
      text-align: center;
      cursor: pointer;
      outline: 0;
    }
    img {
      width: 187px;
      height: 105px;
    }
  }
}
</style>